<template>
	<view class="setting-container" :style="{height: `${windowHeight}px`}">
		<view class="menu-list">
			<view class="list-cell list-cell-arrow" @click="handleToPwd">
				<view class="menu-item-box">
					<view class="iconfont icon-password menu-icon"></view>
					<view>{{$lang('修改密码')}}</view>
				</view>
			</view>
			<view class="list-cell list-cell-arrow" @click="handleToUpgrade">
				<view class="menu-item-box">
					<view class="iconfont icon-refresh menu-icon"></view>
					<view>{{$lang('检查更新')}}</view>
				</view>
			</view>
			<view class="list-cell list-cell-arrow" @click="handleCleanTmp">
				<view class="menu-item-box">
					<view class="iconfont icon-clean menu-icon"></view>
					<view>{{$lang('清理缓存')}}</view>
				</view>
			</view>
			<view class="list-cell list-cell-arrow">
				<view class="menu-item-box place-content-between">
					<view class="menu-item-box">
						<view class="iconfont icon-language menu-icon"></view>
						<view>{{$lang('多语言')}}</view>
					</view>
					<picker class="w-60 text-right" @change="bindPickerChange" :value="languageValue"
						:range="languageList">
						<view class="uni-input">{{$lang(languageList[languageValue])}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="cu-list menu">
			<!-- <view class="cu-item item-box"> -->
			<button type="primary" class="m-[30px] h-[40px] leading-[40px] rounded-[90px] text-white"
				@click="handleLogout">{{$lang('退出登录')}}
			</button>
			<!-- </view> -->
		</view>
	</view>
</template>

<script setup>
	const {
		proxy
	} = getCurrentInstance()
	import useUserStore from '@/store/modules/user'
	import checkappupdate from '@/plugins/update/checkAppUpdate.js'
	const windowHeight = ref(uni.getSystemInfoSync().windowHeight)
	const list = ref([{
			label: "中文",
			value: "zh-Hans"
		},
		{
			label: "英文",
			value: "en"
		}
	])
	const languageValue = ref(list.value.findIndex(it => it.value == uni.getLocale()))
	const languageList = computed(() => {
		return [
			proxy.$lang("中文"), proxy.$lang("英文")
		]
	})

	function bindPickerChange(e) {
		const val = e.detail.value
		uni.setLocale(list.value[val].value)
		languageValue.value = val
	}

	function handleToPwd() {
		proxy.$tab.navigateTo('/pages/mine/pwd/index')
	}

	function handleToUpgrade() {
		// #ifdef APP-PLUS
		//检验版本更新
		checkappupdate.check({
			api: '/system/UpdateConfig'
		}).then(res=>{
			proxy.$modal.showToast(res)
		})
		// #endif
		// #ifdef H5
		proxy.$modal.showToast('模块建设中~')
		// #endif
	}

	function handleCleanTmp() {
		proxy.$modal.showToast('模块建设中~')
	}

	function handleLogout() {
		proxy.$modal.confirm(proxy.$lang('提示'), proxy.$lang('确定注销并退出系统吗？')).then(() => {
			useUserStore().LogOut().then(() => {
				proxy.$tab.redirectTo('/pages/index')
			})
		})
	}
</script>

<style lang="scss">
	.item-box {
		background-color: #FFFFFF;
		margin: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 10rpx;
		border-radius: 8rpx;
		color: #303133;
		font-size: 32rpx;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>